<template>
  <div class="footer">
    <div class="links">
      <a href="javascript:;" trigger="click">
        <a-popover title="微信小程序二维码">
          <template slot="content">
            <img class="itemImg" src="https://mis-western-restaurant.oss-cn-guangzhou.aliyuncs.com/images/2022/05/22/0cab86c4-73b5-4f57-a263-0fda4720802a.jpg" alt="">
          </template>
          Real 餐厅管理系统
        </a-popover>
      </a>
      <a href="https://gitee.com/mo__om/westfood">
        <img
          src="https://mis-western-restaurant.oss-cn-guangzhou.aliyuncs.com/images/2022/05/22/c9597985-18c1-491d-a1c3-a87392485bca.png"
          alt=""
        />
      </a>
      <a href="https://github.com/zhangdaiscott/jeecg-boot" target="blank"
        >特别感谢---jeecg-boot</a
      >
    </div>
    <div class="copyright">
      Copyright
      <a-icon type="copyright" />
      2021
      <a-popover title="项目成员" style="max-width:100%" trigger="click" >
        <template slot="content">
          <div class="people">
            <div v-for="item in people" :key="item.name" class="item">
              <div class="text">{{item.text}}</div>
              <div class="name">{{item.name}}</div>
              <img :src="item.src" class="itemImg" alt="">
            </div>
          </div>
        </template>
        <a>Real团队 出品</a>
      </a-popover>
    </div>
  </div>
</template>

<script>
export default {
  name: "LayoutFooter",
  data(){
    return{
      people:[
      {
        text: "项目经理、前端设计师、工程师",
        name: "mo_om",
        src: "https://mis-western-restaurant.oss-cn-guangzhou.aliyuncs.com/images/2022/04/24/edd8a478-d41a-4db3-aa7f-a0ea650471de.png"
      },
      {
        text: "后端架构师、工程师、运维",
        name: "Listener",
        src: "https://mis-western-restaurant.oss-cn-guangzhou.aliyuncs.com/images/2022/04/24/2202cd16-0a8d-4fad-913b-4d4331c8d0d8.png"
      },
      {
        text: "产品经理、设计师、文档撰写者",
        name: "再见月亮镇",
        src: "https://mis-western-restaurant.oss-cn-guangzhou.aliyuncs.com/images/2022/04/24/6c6c3755-5a4c-448f-a4ab-d3ab0d464545.png"
      },
      {
        text: "测试员、数据员",
        name: "布吉倒",
        src: "https://mis-western-restaurant.oss-cn-guangzhou.aliyuncs.com/images/2022/04/24/749814d9-d608-470a-8261-7ed7ba0f2f71.png"
      },
    ]
    }
  }
};
</script>

<style>
  div .ant-popover-placement-top{
    max-width: 100% !important;
}
</style>
<style lang="less" scoped>
.people{
  display: flex;
  align-items: center;
  text-align: center;
  overflow-x: scroll;
  width: 100%;
}

.item{
  margin: 0px 10px;
}
.itemImg{
  width: 140px;
  height: 140px;
}
a img {
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
}
.footer {
  padding: 0 16px;
  margin: 48px 0 24px;
  text-align: center;

  .links {
    margin-bottom: 8px;

    a {
      color: rgba(0, 0, 0, 0.45);

      &:hover {
        color: rgba(0, 0, 0, 0.65);
      }

      &:not(:last-child) {
        margin-right: 40px;
      }
    }
  }
  .copyright {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
  }
}
</style>
